<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      center
      width="80%"
      :before-close="handleClose">
      <el-card>
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="名称"  prop="fname" required>
                <template v-slot:edit="subscope">
                <input-select
                  v-if="!isLoading"
                  :f7Disable="f7Disable"
                  v-model="subscope.row.fname"
                  ref="equipment"
                  :loadShow="form.fname"
                  :f7-param="f7ParamEquipment"
                  title="设备列表">
                </input-select>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="编码" prop="fnumber" required>
                <tie-number-role class-key="WorkShopResult" v-model="form.fnumber"></tie-number-role>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="人数" prop="fmanqty" required>
                <el-input-number v-model="form.fmanqty"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态" prop="fstatus" required>
                  <el-select v-model="form.fstatus" placeholder="请选择活动状态">
                    <el-option label="启用" value="BASE"></el-option>
                    <el-option label="禁用" value="AUX"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
          <el-form-item label="备注" prop="fdescription">
            <el-input type="textarea" v-model="form.fdescription"></el-input>
          </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <el-button style="margin-bottom: 10px" type="primary" @click="handle_insert">新增</el-button>
        </div>
        <!--          <el-button style="margin-bottom: 10px" type="primary" @click="handle_del">删除</el-button>-->

        <el-table
                  show-overflow
                  highlight-hover-row
                  stripe
                  resizable
                  ref="xTable1"
                  :edit-rules="entryRules"
                  :edit-config="entry_config"
                   class="my_table_insert"
                   max-height="300"
                   :data="tableData"
                   :model="tableData"
                   :auto-resize="true"
                  border>
          <el-table-column label="名称" prop="fname">
              <template v-slot:edit="subscope">
                <input-select
                  v-if="!isLoading"
                  :f7Disable="f7Disable"
                  v-model="subscope.row.fname"
                  ref="equipment"
                  :loadShow="form.fname"
                  :f7-param="f7ParamEquipment"
                  title="设备列表">
                </input-select>
              </template>
          </el-table-column>
          <el-table-column label="状态" prop="fstatus" required>
            <template slot-scope="scope">
              <el-select v-model="scope.row.fstatus" placeholder="请选择活动状态">
                <el-option label="正常" value="NORMAL"></el-option>
                <el-option label="报废" value="ABDM"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="编码" prop="fnumber">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fnumber"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="bookbuytime" label="操作">
            <template slot-scope="scope">
              <!--              v-if="!scope.row.editing"-->
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handle_del(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click=" handleClose()">关闭</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import Work from "@/api/workshopManager/Work";
import TieNumberRole from "@/components/tie/tie-number-role";

export default {
  name: "addEdit_work",
  components: {TieNumberRole},
  props: {
    workAdd: Object,
    fid:null,
  },
  data() {
    return {
      dialogVisible: true,
      isview:false,
      form: {
        fname: '',
        fnumber: '',
        fmanqty: '',
        fstatus: '',
        fdescription: ''
      },

      tableData: [],
      isLoading:false,
      rules: {
        fname: [
          {required: true, message: '请输入名称', trigger: 'blur'},
          {max: 16, message: '长度在 16字符', trigger: 'blur'}
        ],
        fnumber: [{required: true, message: '请输入编码', trigger: 'blur'}],
        fmanqty: [{required: true, message: '请输入人数', trigger: 'blur'}],
        fstatus: [{required:true,message:'请选择状态',trigger:'blur'}]
      },
      entryRules:{
        fatstus:[{required:true,message:'状态不能为空'}],
        fname:[{required:true,message:'名称不能为空'}],

      },
      title:'',
      entry_config:{trigger:'click',mode:'cell'},
      http:new Work,
    };
  },
async created() {
  this.f7ParamEquipment={
    selectId:'fid',
    selectUrl:'/tie-demo/equip/queryListPage',
    selectTreeField:['fgroupid'],
    selectTreeUrl:'/tie-demo/groupTree/queryGroupTree',
    selectShow:{spt: '',field: ['fname']},
    column:[{lable:'编号',prop:'fnumber',isFilter:true,filterField:'fnumber'},{lable:'名称',prop:'fname',isFilter:false,filterField:'fname'}
      ,{lable:'规格型号',prop:'fmodel',isFilter:false,filterField:'fmodel'}
      ,{lable:'简称',prop:'fsimplename',isFilter:true,filterField:'fsimplename'}],
    defaultFilter:[{field:'fstatus',value:"BASE"},{field:'fismain',value:1}]
  }
  this.isLoading = true
  if (this.status == 'add') {
    this.title = "新增数据"
  } else{
    if(this.status == 'edit') {
    this.title = "编辑数据"
  } else if (this.status == 'view') {
    this.title = "查看数据"
    this.isview = true;
    this.rules = {};
    this.entryConfig = {};
    this.entryRules = {};
  }
    let http = new Work;
    let tableData = await http.findByOne({fid: this.fid});
    console.log(tableData);
    this.form=tableData.data
    this.tableData=tableData.data.entrys;
  }
  //this.getTagtypeList();
  //this.getUnitList();
  this.isLoading = false
},
  methods: {
    handleClose() {
      this.$emit("close", {name: 'addEdit', isRefresh: false}
      );
    },
    async submitForm() {
      this.$refs['form'].validate((valid) => {
        this.form.entrys = this.tableData
        let sxc=this.form.entrys
        if (sxc.length==0){
          this.$tie.showError('','分录不能为空')
          return;
        }
        console.log(this.form)
        if (valid) {
          const loading = this._loading();
          const api = new Work();
          if (this.status=='add'){

            api.add(this.form).then(res => {
              loading.close();
              this.$tie.showSuccess(res.message)
              this.$emit("close", {name: 'addEdit', isRefresh: true});
            }).catch(e => loading.close())
          }else if(this.status=='edit'){
            this.api.update(this.form).then(res =>{
              loading.close();
              this.$emit("close",{name:'addEdit',isRefresh:true});
            }).catch(e =>{
              loading.close()
            })
          }

        }

        return false;
      })

    },
    handle_del(index, row) {
      this.tableData.splice(index, 1);
    },
    handle_insert() {
      const newValue = {
        fname: '',
        fstatus: '',
        fnumber: '',
        foid: ''
      };
      this.tableData.push(newValue)
      console.log(newValue)
    }
    ,
    //加载提示
    _loading() {
      return this.$loading({
        lock: true,
        text: '请耐心等待.....',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
  }
}
</script>

<style scoped>

</style>
